<template>
  <div>
      <a-row type="flex" justify="center" >
            <a-col 
              v-for="(item, index) in navlist"
              v-bind:key="index"
             
            >
              <div @click="golink(item.path)" class="head"  :style="
                selectnavs == item.path ? 'color:#4e6ef2' : ''
              ">
                  <img :src="selectnavs == item.path ? item.icon_off : item.icon" alt="" srcset="" style="width:15px;height:15px">
                  {{item.title}}
              </div>
            </a-col>
      </a-row>
  </div>
</template> 

<script>
// import { nextTick } from 'vue/types/umd';
export default {
  name: "searchnave",
  data() {
    return {
      selectnavs: 0,
      navlist: [
        {
          key: "2",
          title: "纸书",
           icon:require('../../assets/pager.png'),
           icon_off:require('../../assets/pager-off.png'),
          path: "/PaperbookSearch",
        },
        {
          key: "5",
          title: "新电子书",
          icon:require('../../assets/ebook.png'),
          icon_off:require('../../assets/ebook-off.png'),
          path: "/NewEbookSearch",
        },
        {
          key: "1",
          title: "统一检索",
          icon:require('../../assets/search.png'),
          icon_off:require('../../assets/search-off.png'),
          path: "/BookSearch",
        },
        {
          key: "4",
          title: "电子期刊",
          icon:require('../../assets/qikan.png'),
          icon_off:require('../../assets/qikan-off.png'),
          path: "/QikanSearch",
        },
        {
          key: "3",
          title: "电子书",
          icon:require('../../assets/ebook.png'),
          icon_off:require('../../assets/ebook-off.png'),
          path: "/EbookSearch",
        },
      ],
    };
  },
  watch: {
  },
  mounted() {
    var that = this;
    that.selectnavs = this.$route.path;
    this.$store.state.Namedparent.key = that.selectnavs;

  },
  computed: {},
  methods: {
    golink(e){
      if(e == '/QikanSearch'){
        this.$router.push({
          path:e,
        })
      }else{
        this.$router.push({
          path:e,
          query:{
            searchtitle:this.$route.query.searchtitle
          }
        })
      }

    },
    // selectnav(e) {
    //   console.log(e);
    //   console.log(e.item);
    //   //  console.log(item, key, keyPath)
    //   // this.selectnavs = e.key
    //   this.$store.state.Namedparent.key = e.key;
    //   console.log(this.$store.state.Namedparent);
    //   // context.commit("SHOW_SIDER", true);
    //   console.log(this.$store.state);
    //   console.log(this.$store.state.Namedparent);
    // },
  },
};
</script>

<style scoped>
/* .head {
    width: 72%;
    margin: 0 auto;
    display: flex;
    font-size: 14px;
    line-height: 2;
} */
.head {
  padding: 2px 5px;
  margin: 5px 2px;
  color: #000000;
  font-size: 14px;
  line-height: 2;
  text-align: center;
}
.head:hover {
  cursor: pointer;
}
</style>
